<template>
  <div class="box">
    <p class="title">
      品类管理
      <el-button type="primary" class="btn">+添加品类</el-button>
    </p>
    <p>当前商品分类ID:{{categoryId}}</p>
    <el-table :data="leiList" stripe style="width: 100%">
      <el-table-column prop="id" label="品类ID" width="180"></el-table-column>
     
      <el-table-column prop="name" label="品类名称"></el-table-column>
      
      <el-table-column  label="操作">
           <template slot-scope="scope"><el-button type="text" @click="open3(scope.row.id)">修改名称</el-button><a @click="can(scope.row.id)" v-show="aaa">查看其子品类</a></template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { lei } from "@/request/http";
import { chalei } from "@/request/http";
import { name } from "@/request/http";
export default {
    data(){
        return{
            leiList:[],
            categoryId:'',
            aaa:true
        }
    },
    methods:{
        get(){//获取数据
            lei().then((res)=>{
                console.log(res.data.data)
                this.leiList=res.data.data
            })
        },
        can(id){//查看
            this.categoryId=id;
            chalei(this.categoryId).then((res)=>{
                console.log(res)
                this.leiList=res.data.data
            })
            this.aaa=false;
        },
        open3(id) {//修改名称
        this.$prompt('请输入新的品类名称', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
            const nameObj={
                id:id,
                name:value
            }
            name(nameObj).then((res)=>{
                alert(res.data.data)
                this.get()
            })
          this.$message({
            type: 'success',
            message: '修改成功'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消修改'
          });       
        });
      }
    },
    mounted(){
        this.get()
    }
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.box {
  width: 100%;
  height: 100%;
  .title {
    width: 100%;
    height: 8%;
    font-size: 40px;
    .btn {
      width: 10%;
      height: 60%;
      float: right;
    }
  }
}
</style>